<template>
<div>
<!--  收件查看详情  -->

<!--  <el-page-header @back="goBack" title="行政" content="收件详情" ></el-page-header>-->
  <el-button size="medium" type="primary" plain @click="goBack" >返回</el-button>
  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <div class="div-main">
    <el-row>
      <el-col :span="1.5">
        <div>
          <el-divider class="heads"  direction="vertical"></el-divider>
          <b>基本资料:</b>  </div>
      </el-col>
    </el-row>
    <div style="height: 18px"></div>
    <!--  基本资料 表格渲染   -->
    <div class="tableDiv" :model="admExpressageData">
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>收件人:</span><br/>
              {{ admExpressageData.systemUserRecipients }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>收件日期:</span><br/>{{ admExpressageData.expressageDateofreceipt }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div><span>收货来源:</span><br/>{{ admExpressageData.sendName }}</div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>快件类型:</span><br/>
              {{ admExpressageData.expressName }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>领件状态:</span><br/>{{ admExpressageData.takestatus }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--   详细资料     -->

    <div style="height: 40px"></div>

    <el-row>
      <el-col :span="1.5">
        <div>
          <el-divider class="heads"  direction="vertical"></el-divider>
          <b>详细资料:</b>  </div>
      </el-col>
    </el-row>
    <div style="height: 18px"></div>
    <!--  详细资料 表格渲染   -->
    <div class="tableDiv" :model="admExpressageData">
      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>案件:</span><br/>
              {{ admExpressageData.caseNo }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>快递单号:</span><br/>{{ admExpressageData.expressageCourierNumber }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div><span>快递费:</span><br/>{{ admExpressageData.expressFee }}
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>领件人:</span><br/>
              {{ admExpressageData.collarPerson }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <span>领件时间:</span><br/>{{ admExpressageData.expressageBringDate }}
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div><span>相关文件:</span><br/><el-button type="text" size="small" @click="QueryImg">查看</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div>
              <span>备注说明:</span><br/>
              {{ admExpressageData.expressageRemark }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


  <!--  查看文件对话框  -->
  <el-dialog
      title="查看文件"
      :visible.sync="getImgDia"
      width="30%">

    <div class="block">
      <!--      <span class="demonstration">文件:</span>-->
      <el-image :src="admExpressageData.expressageFile"  :preview-src-list="imgSrcs" @click="datu">
        <div slot="error" class="image-slot">
          <!--          <i class="el-icon-picture-outline"></i>-->
          <div class="imgjiazai">图片加载失败...</div>
        </div>
      </el-image>
    </div>
  </el-dialog>


</div>
</template>

<script>
export default {
  name: "SjView",
  data(){
    return{
      id:this.$route.params.id,
      admExpressageData:{}, // 详情数据
      imgSrcs:[],
      getImgDia:false
    }
  },
  created() {
    this.querySjExpressageByid()
  },
  methods:{
    goBack(){ this.$router.go(-1) },
    querySjExpressageByid(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get(`admExpressage/${this.id}`)
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.admExpressageData = res.data.data
        this.admExpressageData.takestatus=this.admExpressageData.takestatus=='2'?'已领取':'未领取'

      })
      .catch()

    },
    QueryImg(){ // 相关文件
      this.imgSrcs.push(this.admExpressageData.expressageFile)
      this.getImgDia = true
    },
    datu(){
      this.getImgDia=false
    },

  }

}
</script>

<style scoped>


.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

.heads{
  width: 3px;
  background-color: #409EFF;
  height: 19px;
}

.grid-content {
  min-height: 80px;
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 15px 0 0 10px;

}

.grid-content > div > span {
  color: #767676;

}

.div-main{
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}


</style>